<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  	<% 
	%>
     <title>jQuery Mobile Demo</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
   
    <meta name="viewport" content="width=device-width,height=device-height, initial-scale=1, maximum-scale=1.5">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
    <script type="text/javascript" src="js/Lesson1.js"></script>
  </head>
  
  <body>
    <div data-role="page" id="home">
    	<header data-role="header">
    		<h1>标题</h1>
    	</header>
    	<div data-role="content">
    		<h1>竖直按钮</h3>
    		<div data-role="controlgroup" >
    				<a data-role="button" href="#page2" data-icon="check" data-iconpos="top">按钮</a>
    				<a data-role="button" href="#page2" data-icon="check" data-iconpos="top">按钮</a>
    				<a data-role="button" href="#page2" data-icon="check" data-iconpos="top">按钮</a>
    		</div>
    		<h2>水平按钮</h3>
    		<div data-role="controlgroup" data-type="horizontal">
    				<a data-role="button" href="#formPage" data-icon="check" data-iconpos="top">表单页面</a>
    				<a data-role="button" href="#formPage" data-icon="check" data-iconpos="top">表单页面</a>
    				<a data-role="button" href="#formPage" data-icon="check" data-iconpos="top">表单页面</a>
    		</div>
    		<h3>使用主题颜色</h3>
		
			<a href="#page2" data-role="button" data-theme="a">Theme a</a>
			
			<h3>内联按钮</h3>
			
			<a href="#page2" data-role="button" data-theme="a" data-inline="true">Theme a</a>
    	
    	</div>
    	<div data-role="footer">
    		<h1>底部</h1>
    	</div>
    </div>
    <div data-role="page" id="page2">
    	<header data-role="header">
    		<h1>标题</h1>
    	</header>
    	<div data-role="content">
   			<ul data-role="listview">
   				<li ><a href="#home">回到首页</a></li>
   				<li ><a href="#home">回到首页</a></li>
   				<li ><a href="#home">回到首页</a></li>
   			</ul>
    	</div>
    	<div data-role="footer">
    		<h1>底部</h1>
    	</div>
    </div>
    <div data-role="page" id="formPage">
    	<header data-role="header">
    		<h1>标题</h1>
    	</header>
    	<div data-role="content">
   			<div data-role="fieldcontain">
   				<label for="text" >文本输入框</label>
   				<input id="text" name="text"  value="" type="text">
   			</div>
   			<div data-role="fieldcontain">
			    <label for="textarea">文本输入域</label>
			    <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
			</div>
			<div data-role="fieldcontain">
			    <label for="search">搜索输入框</label>
			    <input type="search" name="search" id="search" value="" />
			</div>
			<div data-role="fieldcontain">
			    <fieldset data-role="controlgroup">
			        <legend>单选框:</legend>
			        <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" />
			        <label for="radio-choice-1">蓝</label>
			        <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2"  />
			        <label for="radio-choice-2">绿</label>
			        <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3"  />
			        <label for="radio-choice-3">黑</label>
			    </fieldset>
			</div>
			<div data-role="fieldcontain">
			    <fieldset data-role="controlgroup">
			        <legend>复选框</legend> 
			        <input type="checkbox" name="blue" id="effect1" class="custom" /> 
			        <label for="effect1">效果1</label>
			        <input type="checkbox" name="green" id="effect2" class="custom" />
			        <label for="effect2">效果2</label>
			        <input type="checkbox" name="pink" id="effect3" class="custom"  />
			        <label for="effect3">效果3</label>
			    </fieldset>
			</div>
			<div data-role="fieldcontain">
			    <label for="select-choice-1" class="select">选择列表</label>
			    <select data-native-menu="false" name="select-choice-1" id="select-choice-1"  multiple="multiple" >
			    	<optgroup label="Group1">
			    		 <option value="12h">12小时</option>
			       		 <option value="1d">一天</option>
			    	</optgroup> 
			    	<optgroup label="Group2">
			    		 <option value="2d">两天</option>
			       		 <option value="week" disabled="disabled">一周</option>
			    	</optgroup> 
			    </select>   
			</div>
			<div data-role="fieldcontain">
			    <label for="slider">滑杆</label>
			    <input type="range" name="slider" id="slider" value="0" min="0" max="100"  />
			</div>
			<div data-role="fieldcontain">
			    <label for="slider">开关</label>
			    <select name="slider" id="slider" data-role="slider">
			        <option value="off">关闭</option>
			        <option value="on">开启</option>
			    </select> 
			</div>
    	</div>
    	<div data-role="footer">
    		<h1>底部</h1>
    	</div>
    </div>
  </body>
</html>
